import Vue from "vue";
import VueRouter from "vue-router";
import Layout from '@/layout'

Vue.use(VueRouter);

export const routes = [
  {
    path: "/",
    meta: {
      title: "主页"
    },
    // 重点是这个， 有这个存在， 则又形成一次嵌套路由结构
    component: Layout,
    children: [
      {
        path: '/',
        name: 'home',
        meta: {
          title: "主页"
        },
        component: () => import("@/pages/home")
      }
    ]
  },
  {
    path: "/form-validator",
    component: Layout,
    meta: {
      title: "表单校验"
    },
    children: [
      {
        path: 'base',
        name: "form-validator",
        meta: {
          title: "数字类型校验"
        },
        component: () => import("@/pages/form-check/base.vue"),
      },

      {
        path: 'check-file',
        name: "check-file",
        meta: {
          title: "文件上传校验"
        },
        component: () => import("@/pages/form-check/check-file.vue"),
      },
      {
        path: 'parent-child',
        name: "parent-child",
        meta: {
          title: "组件提供统一对外接口"
        },
        component: () => import("@/pages/form-check/parent-child"),
      },
      {
        path: 'customize-message',
        name: "customize-message",
        meta: {
          title: "自定义message"
        },
        component: () => import("@/pages/form-check/customize-message"),
      },
      {
        path: 'async-sync',
        meta: {
          title: "同步异步调用"
        },
        component: () => import("@/pages/form-check/async-sync.vue"),
      },
      {
        path: 'dialog-compose',
        meta: {
          title: "el-dialog结合"
        },
        component: () => import("@/pages/form-check/dialog.vue"),
      },
      {
        path: 'tab-compose-check',
        meta: {
          title: "多tab校验"
        },
        component: () => import("@/pages/form-check/tabs"),
      },
      {
        path: 'dynamic-field-check',
        meta: {
          title: "字段联动校验"
        },
        component: () => import("@/pages/form-check/dynamic-field-check.vue"),
      },
      {
        path: 'custom-label',
        meta: {
          title: "自定义label展示(2行)"
        },
        component: () => import("@/pages/form-check/custom-label.vue"),
      },
      {
        path: 'dynamic-rules',
        meta: {
          title: "动态rules"
        },
        component: () => import("@/pages/form-check/dynamic-rules.vue"),
      },
      {
        path: 'common-validator-fn',
        meta: {
          title: "「共用」自定义校验"
        },
        component: () => import("@/pages/form-check/common-validator-fn"),
      },
      {
        path: 'table-check',
        name: 'table-check',
        meta: {
          title: "table校验"
        },
        component: () => import("@/pages/form-check/table-check"),
      }
      // {
      //   path: 'invalidation-check',
      //   meta: {
      //     title: "校验失效情况"
      //   },
      //   component: () => import("@/pages/form-check/invalidation-check"),
      // }
    ]
  },
  {
    path: '/dynamic-input-focus',
    name: 'input-focus',
    meta: {
      title: '动态input 聚焦focus'
    },
    component: () => import('@/pages/form-input-focus')
  },
  {
    path: '/dynamic-img',
    name: 'dynamic-img',
    meta: {
      title: 'vue项目使用图片的方式'
    },
    component: () => import('@/pages/dynamic-img')
  },
  {
    path: '/lazy-load-img/standard',
    name: 'standard',
    meta: {
      title: '浏览器支持的懒加载'
    },
    component: () => import('@/pages/lazy-load-img/standard')
  },
  {
    path: '/vue-directives',
    name: 'vue-directives',
    meta: {
      title: 'vue自定义指令集'
    },
    component: () => import('@/pages/vue-directives')
  },
  {
    path: '/vue-dynamic-component',
    name: 'vue-dynamic-component',
    meta: {
      title: 'vue中使用extends创建动态组件'
    },
    component: () => import('@/pages/dynamic-component')
  },
  {
    path: '/sync-componet',
    name: 'sync-componet',
    meta: {
      title: '异步组件'
    },
    component: () => import('@/pages/sync-component')
  },
  {
    path: '/dynamic-table-header',
    name: 'dynamic-table-header',
    meta: {
      title: 'element-ui 动态表头'
    },
    component: () => import('@/pages/dynamic-table-header')
  },
  {
    path: '/table-merge',
    meta: {
      title: '表格合并'
    },
    component: Layout,
    children: [
      {
        path: '',
        name: 'single-field-merge',
        meta: {
          title: '单字段合并'
        },
        component: () => import('@/pages/table-merge/index.vue')
      },
      {
        path: 'multi-field-merge',
        name: 'multi-field-merge',
        meta: {
          title: '多字段合并'
        },
        component: () => import('@/pages/table-merge/index.vue')
      }
    ]
  },
  {
    path: '/circle-click-range',
    meta: {
      title: '实现圆形可点击'
    },
    component: () => import('@/pages/circle-click-range/border-radius.vue')
  },
  {
    path: '/event-bus',
    meta: {
      title: 'event bus'
    },
    component: () => import(`@/pages/event-bus/index.vue`)
  },
  {
    path: '/calc-100-day',
    meta: {
      title: 'day of love'
    },
    component: () => import(`@/pages/calc-100-day/index.vue`)
  }
];


console.log(routes);


const router = new VueRouter({
  // mode: 'hash',
  mode: 'history',
  routes,

})

export const generatorMenu = () => {
  return []
  // return routes.map((item) => {
  //   return {
  //     path: item.path,
  //     title: item.meta.title,
  //     // 有问题
  //     children: item.children ? generatorMenu(item.children) : []
  //   };
  // });
};



export default router;
